import React,{useState,useEffect} from 'react';
import { useHistory } from 'react-router-dom';
import {connect} from 'react-redux' 
import {request} from '../../../network/request'
import {Toast, List ,Icon , Drawer , NavBar , Card, WingBlank, WhiteSpace} from 'antd-mobile'
import './people.css'
import {Spin} from 'antd'
import {get_people_list} from '../../../network/people'

import country from '../../../statics/img/country.svg'
import {country_img} from './utils'
import {check_identity} from '../../../tool'

import { PeopleAction } from '../../../store/actions';

const People = (props) => {

    const [people_total_list,setpeople_total_list] = useState([])
    const [city_group,setcity_group] = useState([])
    const [open,setopen] = useState(false)
  
    const [current_city_info,setcurrent_city_info] = useState([])
    const [current_city_flag,setcurrent_city_flag] = useState('')
    const [isloading,setisloading] = useState(true)
    

    const {setPC,p_city} = props

    let history = useHistory()

   

    
    const onCardClick = (id) =>{
        history.push(`/main/home/people/${id}`)
    }

    const onOpenChange = () => {
        setopen(!open);
      }

    
      
    useEffect(()=>{
        
        const get_people = async()=>{
            const res = await get_people_list()
        
            if(res.code === 1400){
                Toast.info('权限不足，请升级至内部成员',2,()=>{  
                    history.push({pathname:'/main/profile'})
                })
            }
            if(res.code === 600)
            {
                Toast.info('登录失效，请重新登录',2,()=>{  
                    history.push({pathname:'/main/login'})
                })
            }
            else if(res.code === 200)
            {
                const data = res.data
        
                const city_group = Object.keys(data)
              
                
                setpeople_total_list(data)
                if(!p_city)  setopen(true)
                
              
                setcity_group(city_group)
              
                setisloading(false)
                
            }
        }

        if(check_identity(props.identity))
        {
            get_people()
        }
        else {
            Toast.info('权限不足，请升级至内部成员',2,()=>{  
            props.history.push({pathname:'/main/profile'})
        })
        }
       
        
            
    },[])

    useEffect(()=>{
        
        setcurrent_city_info(people_total_list[p_city])
    },[p_city,people_total_list])

    const sidebar = (
        <Spin spinning={isloading}>
        <List>
        <List.Item 
              thumb={country}
              multipleLine
            >国家/城市
        </List.Item>
        {city_group.map((item, index) => {
          return (<List.Item key={index}
            onClick = {()=>{
                    
                    setPC(item)
                    setcurrent_city_info(people_total_list[item])
               
                    setcurrent_city_flag(country_img(item))
                    setopen(false)
            }} 
            thumb={country_img(item)}
          >{item}</List.Item>);
        })}
      </List>
      </Spin>);


    return ( 
       
          <div className='people-content' style={{height:'calc( 100vh - 94px )',overflow:'auto'}}>
                <NavBar icon={<Icon type="ellipsis" />} onLeftClick={onOpenChange}>根据地区选择人物</NavBar>
                <Drawer
                    className="my-drawer"
                    style={{ minHeight: document.documentElement.clientHeight }}
                    enableDragHandle 
                    contentStyle={{ color: '#A6A6A6', textAlign: 'center',  }}
                    sidebar={sidebar}
                    open={open}
                    onOpenChange={onOpenChange}
                >
              
                
                { 
                current_city_info ? current_city_info.map(item=>{
                    
                    return(

                        <WingBlank size="lg" key={item.id}>
                            <WhiteSpace size="lg" />
                            <Card onClick={()=>onCardClick(item.id)}>
                            <Card.Header
                                
                                thumb={item.picture}
                                thumbStyle={{height:'100px',}}
                                extra={<div >{item.name}</div>}
                            />
                            <Card.Body>
                                
                               <img style={{height:'40px' , lineHeight:'40px' , marginRight:'10px' }} src={current_city_flag}/>
                                
                               <span> {item.country} {item.identity}</span>
                            </Card.Body>
                           
                            </Card>
                            <WhiteSpace size="lg" />
                        </WingBlank>
                     
                    )
                })
                
                :<div>请选择国家/地区</div>
                   
                }       
                
                </Drawer>
            </div>
         
    )

            }

const mapState2Props = (state) => 
    ({
        identity : state.getIn(['login','identity']),
        p_city : state.getIn(['people','city']),
                  
    })
    
const mapDispatch2Props  = {
    setPC: PeopleAction.set_peoplecity,
   
}
                 

export default connect(mapState2Props,mapDispatch2Props)(People);